這是一套可以將元素釘住(置頂、置底都可以)的jQuery的套件，向左和向右則不影響

GitHub Star: 1,700
Javascripting Overall: -
瀏覽器: Chrome、Firefox和IE8+
RWD: 支援
License: MIT

《安裝》

• CDN

    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- ScrollToFixed v1.0.8 -->
    <script tsrc="https://cdnjs.cloudflare.com/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>
  

• npm

    $ npm install scrolltofixed
  

《範例》

• 捲軸碰到即刻置頂

    <style>
    	#header, #container, #container2, #footer {
    		/* 設定樣式 */
    		background: #000;
    		color: #fff;
    		text-align: center;
    	}
    </style>
    <div style="height: 100px"><!-- 內容 --></div>
    <div id="header">Header</div>
    <div style="height: 100px"><!-- 內容 --></div>
    <div id="container">Container 1</div>
    <div style="height: 100px"><!-- 內容 --></div>
    <div id="container2">Container 2</div>
    <div style="height: 100px"><!-- 內容 --></div>
    <div style="height: 10000px"><!-- 內容 --></div>
    <div id="footer">Footer</div>
    <script>
    	$( "#header" ).scrollToFixed();
    	$( "#container" ).scrollToFixed({
    		// 參數設定[註1]
    		marginTop: $( "#header" ).outerHeight(), // 與上面的間距
    		limit: $( "#container2" ).offset().top, // 超過此高度，取消釘住
    		zIndex: 999, // 圖層深度
    		spacerClass: "spacer", // 間隔的類別名稱
    		minWidth: false, // 當視窗寬度小於此時，關閉釘住功能
    		maxWidth: false, // 當視窗寬度大於此時，關閉釘住功能
    		dontCheckForPositionFixedSupport: false, // 關閉確認瀏覽器是否支援fixed功能
    		dontSetWidth: false, // 當物件是absolute或fixed時，不設定寬度
    		removeOffsets: false, // 當物件是absolute時，移除向左偏移
    		offsets: false, // 設定向左偏移
    		preAbsolute: function() { console.log( "preAbsolute" ) }, // 物件變成absolute後，會呼叫此函式
    		postAbsolute: function() { console.log( "postAbsolute" ) }, // 物件離開absolute後，會呼叫此函式
    		preFixed: function() { console.log( "preFixed" ) }, // 物件變成fixed後，會呼叫此函式
    		postFixed: function() { console.log( "postFixed" ) }, // 物件離開fixed後，會呼叫此函式
    		fixed: function() { console.log( "fixed" ) }, // 物件是fixed時，會呼叫此函式
    		unfixed: function() { console.log( "unfixed" ) }, // 物件不是fixed時，會呼叫此函式
    	});
    	$( "#container2" ).scrollToFixed({
    		marginTop: $( "#header" ).outerHeight() // 與上面的間距
    	});
    	$( "#footer" ).scrollToFixed({
    		bottom: 0 // 置頂與下面的間距
    	});
    </script>
  

  [註1]

  參數	描述

  marginTop|與上面的間距
  bottom|置頂與下面的間距
  limit|超過此高度，取消釘住
  zIndex|圖層深度
  spacerClass|間隔的類別名稱
  minWidth|當視窗寬度小於此時，關閉釘住功能
  maxWidth|當視窗寬度大於此時，關閉釘住功能
  dontCheckForPositionFixedSupport|關閉確認瀏覽器是否支援fixed功能
  dontSetWidth|當物件是absolute或fixed時，不設定寬度
  removeOffsets|當物件是absolute時，移除向左偏移
  offsets|設定向左偏移
  preAbsolute()|物件變成absolute後，會呼叫此函式
  postAbsolute()|物件離開absolute後，會呼叫此函式
  preFixed()|物件變成fixed後，會呼叫此函式
  postFixed()|物件離開fixed後，會呼叫此函式
  fixed()|物件是fixed時，會呼叫此函式
  unfixed()|物件不是fixed時，會呼叫此函式

《延伸》

1. ScrollToFixed Plugin Demo
2. bigspotteddog/ScrollToFixed: This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.